import { ScrollView, Text, View, Image } from '@tarojs/components';
import { ScrollViewProps } from '@tarojs/components/types/props';
import { useEffect, useRef, useState } from 'react';
import './charge.less';
import { eventCenter, getCurrentInstance } from "@tarojs/runtime";

const Charge = () => {

    const [scrollHeight,] = useState('100vh');
    const [listScrollTop,] = useState(100);
    const [txtList] = useState([
        { type: 'item1' },
        { type: 'item2' },
        { type: 'item3' },
        { type: 'item4' }
    ])
    const [toViewId, setToViewId] = useState('')

    const svRef = useRef<ScrollViewProps>()

    const onReady = () => {
        console.log('Ready....')
        setToViewId('item3')
    }

    useEffect(() => {
        // svRef.current.scrollIntoView = 'item4'

        const onShowEventId = getCurrentInstance().router?.onReady
        eventCenter.on(onShowEventId ? onShowEventId : "空ID", onReady, this)

    }, [])

    return (
        <View className='charge-wrapper'>
            <ScrollView className='scroll-container' style={{ height: scrollHeight }} enableFlex enableBackToTop scrollY
                scrollIntoView={toViewId}
            // ref={svRef}
            >
                {txtList.map((item: any) => (
                    <View className='item' id={item.type} >
                        <Text style={{ color: 'white' }}>{item.type}</Text>
                        <Image className='img-self' src='http://ys-aigc.oss-cn-beijing.aliyuncs.com/mj/Kt4Ozh.jpg?x-oss-process=image/resize,w_512/quality,q_50' lazyLoad mode="widthFix" />
                    </View>
                ))}
            </ScrollView>
        </View>
    );

}

export default Charge;
